<script>
export default {
  name: "LeftMenuView",
  data(){
    return{
      // 键是一级标题，值是二级标题
      menuOnj:{
        '帮买取快递废品回收':['门店管理','驿站管理','商品管理','订单管理','废品回收订单'],
        '胖虎甄选':['商品管理','订单管理','售后订单']
      },
      // 点击二级标题切换组件 ，将二级标题作为键值对的键名
      // 点击二级标题  查找对应的路由路径
      routeObj:{
        '门店管理':'/help/mendian',
        '驿站管理':'/help/yizhan',
        '商品管理':'/help/product',
        '订单管理':'/help/dingdan'
      },
      navArr:[]
    }
  },
  props:['isCollapse'],
  methods:{
    handleOpen:function(value){

    },
    handleClose:function(value){

    },
    enterXiaoQuAction(){
      this.$router.push('/xiaoqu').catch(()=>{});
      this.navArr=['小区管理']
      this.$emit('navigateEvent',this.navArr);

    },
    showComponent(key,fujik){
      // 点击二级标题事件，将标题作为键 取出对应的路由 切换组件
      let path=this.routeObj[key];
      this.$router.push({path:path}).catch(()=>{});
      this.navArr=[fujik,key]
      this.$emit('navigateEvent',this.navArr);
      //TODO:历史记录代写
      this.addHistory(key)
    },
    //这里的key是具体的二级菜单
    addHistory(key){

    }
  }
}
</script>

<template>
<div :class="{leftMenu:true,transitionWidth:isCollapse}">
  <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#304156"
      text-color="#fff"
      active-text-color="#ffd04b"
      collapse-transition
      :collapse="isCollapse"
  >
    <el-menu-item index="1" @click="enterXiaoQuAction">
      <i class="el-icon-setting"></i>
      <span slot="title">小区管理</span>
    </el-menu-item>
    <el-submenu :index="i+2+''" v-for="(v,k,i) in menuOnj" :key="k">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>{{k}}</span>
      </template>

        <el-menu-item :index="i+2+'-'+index" v-for="(value,index) in v" :key="index" @click="showComponent(value,k)">{{value}}</el-menu-item>

    </el-submenu>
  </el-menu>
</div>
</template>

<style scoped>

.leftMenu{
  width: 250px;
  background-color: #304156;
  position: fixed;

  /*1vh是将当前设备的高度100份 一份就是vh*/
  height: 100%;
  left: 0;
  top: 0;
  transition: width 0.5s;


}
.transitionWidth{
  width: 65px;
  transition: width 0.5s;
}
/*媒介查询   就是浏览器宽高的变化 做出页面布局调整*/
@media  only screen and (max-width:1200px) {
  /*页面宽度在1000px以内才会执行此代码
  max-width:1000px   最大能监听到1000px的宽度
  */
  .left-menu{
    visibility: hidden;

  }
}
.el-menu-vertical-demo{
  border-right: none;
}
</style>